<template>
  <div class="page-header-index-wide">
    <a-form layout="inline" :form="form">
      <a-row :gutter="24">
        <a-col :md="4">
          <a-form-item style="width: 200px" :wrapperCol="wrapperRow">
            <j-select-depart placeholder="请选择机构"  v-decorator="['queryParam.office']" @change="areaChange"/>
<!--            <j-dict-select-tag ref="arear" placeholder="请选择区域" :triggerChange="true" dictCode="area" v-decorator="['area', {}]" @change="areaChange"/>-->
          </a-form-item>
        </a-col>
        <a-col :md="4">
          <div style="padding-left: 6px;padding-top: 4px">
            <select style="width: 100%;height: 31px;" v-model="queryParam.project">
              <option value="">请选择项目</option>
              <option v-for="depart in departs" :value="depart.project">{{depart.project}}</option>
            </select>
          </div>
<!--          <j-select-depart v-model="queryParam.office"/>-->
        </a-col>
        <a-col :md="6" :sm="10">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-range-picker
              style="width: 210px"
              v-model="queryParam.createTimeRange"
              format="YYYY-MM-DD"
              :placeholder="['开始时间', '结束时间']"
              @change="onDateChange"
            />
          </a-form-item>
        </a-col>
        <a-col :md="4">
          <a-button type="primary" @click="queryData" icon="search">查询</a-button>
<!--          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="importExcel" style="margin-left: 5%">-->
<!--            <a-button type="primary"  icon="import">导入</a-button>-->
<!--          </a-upload>-->
        </a-col>
      </a-row>
    </a-form>
    <a-card :bordered="false" class="card-area" >
      <a-row :gutter="24" :loading="loading">
        <a-col :md="24">
            <div id="mainCpuMhz" :style="{width: '100%', height: '400px'}"></div>
        </a-col>
      </a-row>

      <a-row :gutter="24" :loading="loading" :style="{paddingTop:'20px'}">
        <a-col :md="24">
          <div id="mainMemorySize" :style="{width: '100%', height: '400px'}"></div>
        </a-col>
      </a-row>

      <a-row :md="24" :loading="loading" :style="{paddingTop:'20px'}">
        <a-col :md="24">
            <div id="diskSize" :style="{width: '100%', height: '400px'}"></div>
        </a-col>
      </a-row>

      <a-row :md="24" :loading="loading" :style="{paddingTop:'20px'}">
        <a-col :md="24">
          <div id="diskUsage" :style="{width: '100%', height: '400px'}"></div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    export default {
        name: "sumForm",
        mixins:[JeecgListMixin],
        components: {
            JSelectDepart,
            // JeecgListMixin
        },
        data () {
            return{
                form: this.$form.createForm(this),
                toppx:'5%',
                eBottom:'50%',
                departs:[],
                cpuBool:false,
                memoryBool:false,
                diskBool:false,
                queryParam:{
                    office:'',
                    area:'',
                    project:'',
                    createTimeRange:[],
                },
                wrapperRow: {
                    xs: { span: 24 },
                    sm: { span: 24 },
                },
                labelCol: {
                    xs: { span: 1 },
                    sm: { span: 2 },
                },
                wrapperCol: {
                    xs: { span: 10 },
                    sm: { span: 16 },
                },
                dataSource:[],
                loading:false,
                url:{
                    listData:"/governmentCloud/list",
                    importExcelUrl: "/governmentCloud/importExcelUseRatio",
                    departData:"/governmentCloud/departData"
                }
            }
        },
        computed: {
            importExcelUrl: function(){
                return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
            }
        },
        created(){
            this.departData({});
            this.queryData();
        },
        methods:{
            onDateChange: function (value, dateString) {
                this.queryParam.createTime_begin=dateString[0];
                this.queryParam.createTime_end=dateString[1];
            },
            areaChange(e){
                this.queryParam.office = e;
                this.departData({office:e});
            },
            departData(office){
                getAction(this.url.departData, office).then((res) => {
                  this.departs = res.project;
                })
            },
            /* 导入 */
            importExcel(info){
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    if(info.file.response.success){
                        this.$message.success(`${info.file.name} 文件上传成功`);
                    } else {
                        this.$message.error(`${info.file.name} ${info.file.response.message}.`);
                    }
                } else if (info.file.status === 'error') {
                    this.$message.error(`文件上传失败: ${info.file.msg} `);
                }
            },
            queryData(){
                var params = {project:this.queryParam.project,office:this.queryParam.office,createTime_begin:this.queryParam.createTime_begin,
                    createTime_end:this.queryParam.createTime_end};
                this.loading = true;
                getAction(this.url.listData, params).then((res) => {
                    if(res != ""){
                        this.echart(res.xAxis,res.yMainCpuMhz,"云服务器cpu利用率分布","mainCpuMhz");
                        this.echart(res.xAxis,res.yMainMemorySize,"云服务器内存利用率分布","mainMemorySize");
                        this.echart(res.xAxis,res.yDiskSize,"云服务器硬盘利用率分布","diskSize");
                        this.echart(res.xAxis,res.diskUsage,"云服务器硬盘使用量","diskUsage");
                    }
                    this.loading = false;
                })
            },
            echart(xAxis,dataSource,title,id){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(id));
                // 绘制图表
                var option = null;
                switch (id) {
                    case 'mainCpuMhz':
                        this.cpuBool = true;
                        option = this.cpu(this.$echarts,xAxis,dataSource,title);
                        break;
                    case 'mainMemorySize':
                        this.memoryBool = true;
                        option = this.memory(this.$echarts,xAxis,dataSource,title);
                        break;
                    case 'diskSize':
                        this.diskBool = true;
                        option = this.disk(this.$echarts,xAxis,dataSource,title);
                        break;
                    case 'diskUsage':
                      this.diskBool = true;
                      option = this.diskUsage(this.$echarts,xAxis,dataSource,title);
                      break;
                }
                if(option!=null){
                  myChart.setOption(option);
                }
            },
          diskUsage(echarts,xAxis,dataSource,title){
            var option = {
              "backgroundColor": "rgb(20, 58, 110)",
              title: {
                text: title,
                "textStyle": {
                  "color": '#d9efff'
                },
              },
              tooltip: {
                trigger: 'axis'
              },
              grid:{
                bottom:this.eBottom
              },
              dataZoom:[
                {
                  type: 'inside',
                  end:5
                }, {//控制组件样式
                  type: 'slider'
                }
              ],
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xAxis,
                "axisLine": {
                  "lineStyle": {
                    "color": "#82b0ec"
                  },
                },
                "axisLabel": {
                  "textStyle": {
                    "color": "#82b0ec"
                  },
                  interval:0,
                  rotate:90
                }
              },
              yAxis: {
                type: 'value',
                "axisLabel": {
                  "textStyle": {
                    "color": "#82b0ec"
                  },
                  "formatter": "{value}"
                },
              },
              series: dataSource
            };
            return option;
          },
            disk(echarts,xAxis,dataSource,title){
                var option = {
                    "backgroundColor": "rgb(20, 58, 110)",
                    title: {
                        text: title,
                        "textStyle": {
                            "color": '#d9efff'
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid:{
                        bottom:this.eBottom
                    },
                    dataZoom:[
                        {
                            type: 'inside',
                            end:5
                        }, {//控制组件样式
                            type: 'slider'
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis,
                        "axisLine": {
                            "lineStyle": {
                                "color": "#82b0ec"
                            },
                        },
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            interval:0,
                            rotate:90
                        }
                    },
                    yAxis: {
                        type: 'value',
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            "formatter": "{value}"
                        },
                        max:100
                    },
                    series: dataSource
                };
                return option;
            },
            memory(echarts,xAxis,dataSource,title){
                var option = {
                    "backgroundColor": "rgb(20, 58, 110)",
                    title: {
                        text: title,
                        "textStyle": {
                            "color": '#d9efff'
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid:{
                        bottom:this.eBottom
                    },
                    dataZoom:[
                        {
                            type: 'inside',
                            end:5
                        }, {//控制组件样式
                            type: 'slider'
                        }
                    ],
                    legend: {
                        data:['最大内存利用率(%)','平均内存利用率(%)','最小内存利用率(%)'],
                        top: this.toppx,
                        "textStyle": {
                            "color": '#d9efff'
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis,
                        "axisLine": {
                            "lineStyle": {
                                "color": "#82b0ec"
                            }
                        },
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            interval:0,
                            rotate:90
                        }
                    },
                    yAxis: {
                        type: 'value',
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            "formatter": "{value}"
                        },
                        max:100
                    },
                    series: dataSource
                };
                return option;
            },
            cpu(echarts,xAxis,dataSource,title){
                var option = {
                    "backgroundColor": "rgb(20, 58, 110)",
                    title: {
                        text: title,
                        "textStyle": {
                            "color": '#d9efff'
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid:{
                        bottom:this.eBottom
                    },
                    dataZoom:[
                        {
                            type: 'inside',
                            end:5
                        }, {//控制组件样式
                            type: 'slider'
                        }
                    ],
                    legend: {
                        data:['最大CPU利用率(%)','平均CPU利用率(%)','最小CPU利用率(%)'],
                        top: this.toppx,
                        "textStyle": {
                            "color": '#d9efff'
                        },
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis,
                        "axisLine": {
                            "lineStyle": {
                                "color": "#82b0ec"
                            }
                        },
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            interval:0,
                            rotate:90
                        }
                    },
                    yAxis: {
                        type: 'value',
                        "axisLabel": {
                            "textStyle": {
                                "color": "#82b0ec"
                            },
                            "formatter": "{value}"
                        },
                        max:100
                    },
                    series: dataSource
                };
                return option;
            }
        },
    }
</script>

<style scoped>

</style>